<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';
// 导入我们创建的 useCounterStore 函数
import { useCounterStore } from '../store/counter';

// 导入类型
import type { ChannelResData, ChannelItem } from '../types/data';

// 接收选中频道id的数据
const props = defineProps<{ channelId: number }>();
// 创建 counter store 实例
const counterStore = useCounterStore();
// 定义响应式频道列表数据容器
const channels = ref<ChannelItem[]>([]);

// 组件加载完毕后获取数据
onMounted(async () => {
  const res = await axios.get<ChannelResData>(
    'http://geek.itheima.net/v1_0/channels'
  );
  console.log(res);
  // 设置页面数据
  channels.value = res.data.data.channels;
});

// 子组件向父组件传递数据
const emits = defineEmits<{
  (e: 'changeChannel', id: number): void;
}>();

const fn = (id: number) => {
  console.log('频道id变了', id);
  emits('changeChannel', id);
};

onMounted(() => {
  console.log('频道列表初始化传入的id', props.channelId);
});
</script>

<template>
  <div class="channel-nav">
    <div>{{ counterStore.count }}</div>
    <nav class="list">
      <!-- vue3 中 :key 可以省略了 -->
      <a
        class="item"
        :class="{ active: item.id === channelId }"
        href="javascript:;"
        v-for="item in channels"
        @click="fn(item.id)"
        :key="item.id"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
